<template>
  <div class="seconds-box">
    <div class="seconds-header">
      <span>嗨购秒杀</span>
      <span>10点场</span>
      <span class="countdown-box">
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </span>
      <span>
        爆款轮播秒
      </span>
    </div>
    <ul class="seconds-list">
      <li v-for="item in imgs" :key="item.proid">
        <img  :src="item.img1">
        <p>{{ item.originprice }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

  data() {
    return {
      time: 2 * 60 * 60 * 1000,
      imgs: []
    }
  },
  created() {
    this.$http.get("/pro/seckilllist", {
      params: {
        count: 1,
        limitNum: 3
      }
    })
      .then(res => {
        if (res.data.code === "200") {
          this.imgs = res.data.data;
        }
      })
  }

}
</script>

<style scoped>
.test-box {
  width: 100px;
  height: 30px;

}

.seconds-box {
  width: 100%;
  height: 8.125rem;

}

.seconds-header {
  width: 100%;
  height: 2.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: url() no-repeat center center;
  background-size: cover;

}


.countdown-box {
  width: 140px;
}

.seconds-list {
  width: 100%;
  height: 5.625rem;
  background-color: pink;
  display: flex;
}

.seconds-list img {
  width: 3.75rem;
  height: 3.75rem;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 18px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 5px;
}
</style>